<template>
  <div style="margin-top: 40px">
    <h3 style="letter-spacing: 1px;font-weight: 400;padding-bottom: 10px;margin-left: 300px">个人信息</h3>
    <div style="margin-left: 300px">
      <el-form style="width: 350px;float: left" label-position="top" ref="user" :model="user" label-width="80px" :rules="rules">
        <el-form-item style="padding: 0" label="用户名" prop="account">
          <el-input v-model="user.account" disabled></el-input>
        </el-form-item>
        <el-form-item style="padding: 0" label="学号" prop="studentNo">
          <el-input v-model="user.studentNo" :disabled="flag"></el-input>
        </el-form-item>
        <el-form-item style="padding: 0" label="姓名" prop="name">
          <el-input v-model="user.name" :disabled="flag"></el-input>
        </el-form-item>
        <el-form-item style="padding: 0" label="专业" prop="major">
          <el-input v-model="user.major" :disabled="flag"></el-input>
        </el-form-item>
        <el-form-item style="padding: 0" label="班级" prop="className">
          <el-input v-model="user.className" :disabled="flag"></el-input>
        </el-form-item>
        <el-form-item style="padding: 0" label="年龄" prop="age">
          <el-input v-model="user.age" :disabled="flag"></el-input>
        </el-form-item>
        <el-form-item style="padding: 0" label="性别" prop="gender">
          <el-radio-group v-model="user.gender" :disabled="flag">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="padding: 0" label="个人爱好" prop="hobby">
          <el-input v-model="user.hobby" autocomplete="off" type="textarea" rows="8" :disabled="flag"></el-input>
        </el-form-item>

        <el-form-item label="头像" label-width="120px">
          <el-upload
            ref="upload"
            :limit="1"
            accept=".jpg, .png, .jpeg"
            :action="upload.url"
            :headers="upload.headers"
            :file-list="upload.productFileList"
            :on-progress="handleFileUploadProgress"
            :on-success="imageUrlProductPicSuccess"
            :before-upload="beforeFileUpload"
            :disabled="flag"
            list-type="picture-card">
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-input__tip" style="color:#E6A23C">*建议图片像素：750*420px</div>
          </el-upload>
        </el-form-item>

        <el-form-item style="padding-top: 10px;" v-if="flag">
          <el-button type="primary" @click="changeFlag">修改</el-button>
        </el-form-item>
        <el-form-item style="padding-top: 10px;" v-else>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button type="primary" @click="reset">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {getStudentInfo, updateStudent} from "@/api/student";
import {getToken,getUserId  } from "@/utils/auth";
export default {
  name: "studentInfo",
  data() {
    return {
      id: getUserId(),
      flag: true,
      rules: {
        account: [
          { required: true,message: '用户名不可为空！', trigger: 'blur' },
        ],
        name: [
          { required: true,message: '姓名不可为空！', trigger: 'blur' },
        ],
        studentNo: [
          { required: true,message: '学号不可为空！', trigger: 'blur' },
          { max: 14, message: '学号不可超过14位', trigger: 'blur' },
        ],
        major: [
          { required: true,message: '专业不可为空！', trigger: 'blur' },
        ],
        className: [
          { required: true,message: '班级不可为空！', trigger: 'blur' },
        ],
      },
      upload: {  // 上传参数
        isUploading: false,  // 是否禁用上传
        headers: {token: getToken()},  // 设置上传的请求头部
        url: process.env.VUE_APP_BASE_API + "/student/uploadFile",  // 上传的地址
        productFileList: [],   // 上传的文件列表
      },
      user: {
        name: '',
        password: '',
        gender: '',
        age: '',
        avatarUrl: ''
      },
    }
  },

  mounted() {
  },

  created() {
    this.getStudentInfo();
  },

  methods: {

    reset(){
      this.getStudentInfo();
      this.changeFlag();
    },

    changeFlag(){
      this.flag = !this.flag;
      console.log(this.flag)
    },

    getStudentInfo(){
      getStudentInfo(this.id).then(response => {
        this.user = response.data.userInfo;
        if (this.user.avatar) {
          this.upload.productFileList = [{name: 'default', url: this.user.avatar}];
        }
      });
    },

    onSubmit() {
      this.$refs.user.validate(valid => {
        if (valid) {
          this.loading = true;
          updateStudent(this.user).then(res => {
            this.$message.success(res.message);
            this.changeFlag();
          })
        }
      });
    },

    /** 文件上传前的判断 */
    beforeFileUpload(file) {
      const isJPG = file.type === 'image/jpg';
      const isJPEG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isSize = file.size / 1024 / 1024 < 5;

      if (!isJPG && !isJPEG && !isPNG) {
        this.$message.error('上传图片只能是 .JPG/.JPEG/.PNG 格式!');
      }
      if (!isSize) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return (isJPG || isJPEG || isPNG) && isSize;
    },
    /** 文件上传中处理 */
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    /** 文件上传成功处理 */
    imageUrlProductPicSuccess(response, file, fileList) {
      this.upload.isUploading = false;
      this.user.avatar = response.data.url;
      this.$message.success(response.message);
    }


  },

}

</script>

<style scoped>
>>> .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 5px;
}
</style>
